<template>
  <div>
    <div class="accountReport">

      <!-- 标题 -->
      <div class="accountReport-title">核算报告</div>


      <!-- 条件筛选 -->
      <div class="accountReport-condition">
        <div class="accountReport-condition-form">
          <normal-form-plus
            :formModel="formModel"
            :config="config"
            :plus="plus"/>
        </div>
        <div class="accountReport-condition-btn">
          <el-button>查询</el-button>
          <el-button>重置</el-button>
          <el-button @click="add">新增</el-button>
        </div>
      </div>


      <!-- 表格-核算报告 -->
      <div class="accountReport-report">
        <normal-table
          :tableData="tableData"
          :paginationConfig="paginationConfig"
          :tableLabel="tableLabel"
          :operationConfig="operationConfig"
          :operationList="operationList"
          @event="handleEvent"
          @changePage="changePage"></normal-table>
      </div>

      <!-- 新增核算模型-抽屉 -->
      <el-drawer
        title="新增产品核算报告"
        :visible.sync="drawer"
        :direction="'rtl'">
        <normal-form
          :formModel="addFormModel"
          :config="addConfig"
          :plus="plus"/>
        <div class="drawer-btn">
          <el-button type="primary" @click="createModel()">确认</el-button>
        </div>

      </el-drawer>
      <a href="http://www.xsitg.com.cn/不锈钢产品碳足迹报告.doc" class="a-pos"></a>
    </div>
  </div>
</template>

<script>
import NormalTable from '@/components/NormalTable'
import NormalFormPlus from '@/components/NormalFormPlus'
import NormalForm from '@/components/NormalForm'

export default {
  name: 'accountReport',
  components: {
    NormalTable,
    NormalFormPlus,
    NormalForm
  },
  mounted() {
    if (this.$MOCK.mock) {
      this.tableData = [
        {
          name1: "钢材核算",
          name2: "钢材",
          name3: "100",
          name4: "12243.5",
        },
        {
          name1: "热轧板卷核算",
          name2: "热轧板卷",
          name3: "100",
          name4: "134522",
        },
      ]
    }
  },
  data() {
    return {
      formModel: {
        selection1: '',
        selection2: '',
        selection3: '',
      },
      config: [
        {
          id: 1,
          items: [
            {
              id: '1',
              edit: true,
              type: 'input',
              span: 6,
              model: 'modelLevel',
              name: '',
              props: {
                placeholder: "报告名称",

              }
            },
            {
              id: '2',
              edit: true,
              type: 'select',
              span: 6,
              model: 'modelLevel',
              name: '',
              props: {
                placeholder: "核算周期",
                options: [
                  {value: '1', label: '1'},
                  {value: '2', label: '2'}
                ]
              }
            }
          ]
        },
      ],
      plus: {},
      tableData: [],
      paginationConfig: {
        total: 100,
        page: 1,
        pageSize: 10,
        show: true
      },
      operationList: [
        {
          name: '核算管理',
          order: 1,
          buttonClass: 'primary',
          plus: {}
        },
        {
          name: '碳减排顾问',
          order: 2,
          buttonClass: 'primary',
          plus: {}
        },
        {
          name: '报告下载',
          order: 3,
          buttonClass: 'primary',
          plus: {}
        }
      ],
      operationConfig: {select: false, width: 300},
      tableLabel: [
        {
          prop: "order",
          label: "序号",
          width: 70
        },
        {
          prop: "name1",
          label: "核算名称",
          width: 200
        },
        {
          prop: "name2",
          label: "产品名称",
        },
        {
          prop: "name3",
          label: "核算数量",
        },
        // {
        //   prop: "accountCycle",
        //   label: "核算周期"
        // },
        {
          prop: "name4",
          label: "排放总量（tCO2）",
          width: 200
        },


      ],
      drawer: false,
      // 新增碳足迹报告-数据
      addFormModel: {},
      addConfig: [

        {
          id: '1',
          type: 'input',
          model: 'name',
          name: '核算名称',
          edit: true,
          props: {
            placeholder: '核算名称',
          }
        },
        {
          id: '2',
          type: 'select',
          model: 'lifecycle',
          name: '核算产品',
          edit: true,
          props: {
            placeholder: '核算产品',
            options: [
              {value: "0", label: "产品一"},
              {value: "1", label: "产品二"},
            ]
          }
        },
        {
          id: '3',
          type: 'input',
          model: 'name',
          name: '核算数量',
          edit: true,
          props: {
            placeholder: '核算数量',
          }
        },
        {
          id: '4',
          type: 'select',
          model: 'lifecycle',
          name: '核算周期',
          edit: true,
          props: {
            placeholder: '核算周期',
            options: [
              {value: "0", label: "按年"},
              {value: "1", label: "按月"},
            ]
          }
        },
        {
          id: '5',
          type: 'select',
          model: 'lifecycle',
          name: '核算模型',
          edit: true,
          props: {
            placeholder: '核算模型',
            options: [
              {value: "0", label: "模型一"},
              {value: "1", label: "模型二"},
            ]
          }
        },
        {
          id: '6',
          type: 'text',
          model: 'lifecycle',
          name: '研究目的',
          edit: true,
          props: {
            placeholder: '研究目的',

          }
        },


      ],
      plus: {},

    }
  },
  methods: {
    add() {
      this.drawer = true
    },
    // 处理表格点击事件
    handleEvent(order, row) {
      if (order === 1) {
        this.$router.push("/carbonFootprintVerification/productCarbonAccounting/addProductCarbonAccounting2")
      } else if (order == 2) {
        this.$router.push({
          path: "/enterpriseCarbonAccounting/enterpriseCarbonAccounting/carbonEmissionAside",
          query: {type: 1}
        })
      }
    },
    // 分页点击事件
    changePage() {

    }
  },
}
</script>

<style lang="less" scoped>
.a-pos {
  position: fixed;
  top: 240px;
  right: 30px;
  width: 100px;
  height: 20px;
  // background-color: #000;
}

.accountReport {

  height: 680px;
  overflow: hidden;
  padding: 15px 10px;
  // 标题
  .accountReport-title {
    font-size: 16px;
    font-weight: bold;
  }

  .accountReport-condition {
    display: flex;

    .accountReport-condition-form {
      flex: 3;
    }

    .accountReport-condition-btn {
      flex: 1;
    }
  }

  // 核算报告表格
  .accountReport-report {
    .accountReport-history-title {
      font-size: 14px;
    }
  }
}
</style>
